<template>
  <div class="w-full overflow-hidden">
    <el-menu default-active="message" class="el-menu-vertical-demo h-full" @select="handleSelect">
      <div>
        <div class="w-20 h-20 flex justify-center items-center">
          <el-popover placement="right" :width="400" trigger="click">
            <template #reference>
              <el-avatar :size="50" :src="user.avatar" />
            </template>
            <div>
              <div>
                <img :src=info.avatar class="avactar">
                <p style="text-align: center;">{{ info.name }}</p>
              </div>
              <div
                style="display: flex;; flex-direction: column;justify-content: space-around;align-items: center;text-align: center;">
                <p>账号：<input :value=info.account></p>
                <p>密码：<input type="password" :value=info.account></p>
                <p>简介：<input :value=info.bio></input></p>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
      <el-menu-item index="message">
        <template #title>
          <el-icon>
            <ChatLineRound />
          </el-icon>
        消息
      </template>
      </el-menu-item>
      <el-menu-item index="linkman">
        <template #title>
          <el-icon>
            <UserFilled />
          </el-icon>
        联系人
      </template>
      </el-menu-item>
      <el-menu-item index="space">
        <template #title>
          <el-icon>
            <Menu />
          </el-icon>
        动态
      </template>
      </el-menu-item>
    </el-menu>
    <div class="h-64 flex justify-center items-center">
      <el-switch v-model="on_dark" active-color="#13ce66" inactive-color="#ff4949" @change="Change" />
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { useUserStore } from "@/store/user.js";
import { useRouter } from "vue-router";
import { ref } from 'vue'
import { toggle } from '@/toggle.js'
import { ChatLineRound, UserFilled, Menu, Avatar } from '@element-plus/icons-vue'
const on_dark = ref(false)
const Change = (e) => {
  toggle(e)
}
const info = ref({
  name: "用户1",
  avatar: "../../../public/avatar.jpeg",
  account: "1122334",
  password: "123123",
  bio: "这个用户很懒，什么都没写",
})
const userStore = useUserStore();
const router = useRouter();
const { user } = storeToRefs(userStore);
const handleSelect = (key) => {
  router.push(`/home/${key}`);
};

</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
